<template>
  <div class="daily-handover">
    <div v-if="isToday" class="mb-20px flex justify-end">
      <el-button type="primary" @click="handleCreate" plain>新增</el-button>
    </div>
    <Table
      :columns="basicColumn"
      :data="basicData"
      align="center"
      headerAlign="center"
      border="true"
      :pagination="{
        currentPage: queryParams.pageNo,
        pageSize: queryParams.pageSize,
        total: queryParams.total
      }"
      :loading="loading"
      stripe
      @update:page-size="queryParams.pageSize = $event"
      @update:current-page="queryParams.pageNo = $event"
    >
      <template #filesUrls="{ row }">
        <FileListView :file-list="(row?.filesUrls && row?.filesUrls?.split?.(',')) || []" />
      </template>
      <template #action="{ row }">
        <el-button link type="primary" @click="handleUpdate(row)"> 编辑 </el-button>
        <el-button link type="danger" @click="handleDelete(row.id)"> 删除 </el-button>
      </template>
    </Table>
  </div>

  <!-- 表单弹窗：添加/修改 -->
  <ClassHandoverForm ref="formRef" :date="date" @success="handleSuccess" />
</template>

<script setup lang="ts">
import { ClassHandoverApi, ClassHandover } from '@/api/school/classAffairs/handover'
import ClassHandoverForm from './ClassHandoverForm.vue'
import type { TableColumn } from '@/types/table'
import { formatDate } from '@/utils/formatTime'
const route = useRoute()
const props = defineProps({
  date: {
    type: String,
    default: ''
  },
  isToday: {
    type: Boolean,
    default: true
  }
})
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(false)
const basicData = ref([])
// 分页参数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  total: 0
})
// 表单引用
const formRef = ref()

// 定义操作列
const actionColumn: TableColumn = {
  field: 'action',
  label: '操作',
  fixed: 'right',
  width: 160
}

const basicColumn: any = computed(() => {
  const baseColumns = [
    { label: '主教老师', field: 'mainTeacherName', width: 150 },
    { label: '助教老师', field: 'assistantTeacherName', width: 150 },
    {
      label: '交班时间',
      field: 'handoverTime',
      width: 200,
      formatter(row) {
        return formatDate(row.handoverTime, 'YYYY-MM-DD')
      }
    },
    { label: '幼儿人数', field: 'childCount', width: 150 },
    { label: '情况说明', field: 'remark' },
    { label: '附件', field: 'filesUrls' }
  ]
  return props.isToday ? [...baseColumns, actionColumn] : baseColumns
})
const emit = defineEmits(['refresh'])
const getList = async () => {
  try {
    loading.value = true
    const data = await ClassHandoverApi.getClassHandoverPage({
      classId: route.query.id as string,
      handoverTime: props.date,
      pageNo: queryParams.pageNo,
      pageSize: queryParams.pageSize
    })
    basicData.value = data.list
    queryParams.total = data.total
  } catch (error) {
  } finally {
    loading.value = false
  }
}
const handleSuccess = () => {
  emit('refresh')
  getList()
}
// 新增交班记录
const handleCreate = () => {
  formRef.value.open('create', Number(route.query.id))
}

// 编辑交班记录
const handleUpdate = (row: ClassHandover) => {
  formRef.value.open('update', Number(route.query.id), row.id)
}

// 删除交班记录
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await ClassHandoverApi.deleteClassHandover(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    handleSuccess()
  } catch {}
}
watch(
  () => ({
    pageNo: queryParams.pageNo,
    pageSize: queryParams.pageSize
  }),
  () => {
    getList()
  }
)
watch(
  () => props.date,
  (date) => {
    if (date) {
      getList()
    }
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
.daily-handover {
  background-color: #fff;
  border-radius: 8px;
}
</style>
